<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-02-15 00:17:46
-->
<template>
    <div class="singer-album">
        <!-- 切换按钮 -->
        <div class="btn">
            <el-tooltip content="大图模式" placement="left">
                <span class="iconfont icon-kapian" @click="showList" :class="{active : info.isShowList}"></span>
            </el-tooltip>
            <el-tooltip content="列表模式" placement="right">
                <span class="iconfont icon-ziyuan" @click="showTable" :class="{ active: info.isShowTable }"></span>
            </el-tooltip>
        </div>

        <!-- 显示专辑 大图模式-->
        <AlbumList :AlbumList="albumlist" v-if="info.isShowList"></AlbumList>
        <!-- 列表模式 -->
        <AlbumTable :albumlist="albumlist" v-if="info.isShowTable"></AlbumTable>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import AlbumList from '../../../components/content/albumlist/AlbumList.vue';
import AlbumTable from '../../../components/content/albumlist/AlbumTable.vue';
const props = defineProps({
    albumlist: {
        type: Object,
        default: []
    }
})
const info = reactive({
    isShowTable: false,
    isShowList: true
})
function showList() {
    info.isShowList = true
    info.isShowTable = false
}
function showTable() {
    info.isShowList = false
    info.isShowTable = true
}
</script>

<style lang="scss" scoped>
.singer-album {
    .btn {
        cursor: pointer;

        .iconfont {
            margin-right: 10px;
            font-size: 18px;
        }

        .active {
            color: var(--mycompColor);

        }
    }
}
</style>